<template>
	<div ref="building">
		<div class="math-formula-panel">
			<h2>砖混结构破坏状态</h2>
			<el-collapse>
				<el-collapse-item title="墙体抗剪程度">
					<div class="collapse-formula">
						<Formula display="block" :option="[
							{ content: 'R' },
							{ content: 'τ', scale: 0.6, position: 'bottom' },
							{ content: '(S)' },
							{ content: '=' },
							{ content: '0.14' },
							{ content: '(n-s+1)' },
							{ content: '+' },
							{ content: '0.014' },
							{ content: 'R' },
							{ content: 'm', scale: 0.6, position: 'bottom' },
							{ content: '+' },
							{ content: '0.5' }
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="地震剪力折算系数">
					<div class="collapse-formula">
						<MultilineFormula display="block" :option="[
							{ content: 'α' },
							{ content: '(S)' },
							{ content: '=' },
							{
								rows: [
									[{ content: '2n+1' }],
									[{ content: '3' }, { content: '∑', scale: 1.5, topContent: 'n', bottomContent: 'i=s' }, { content: 'i' }]
								]
							}
						]">
						</MultilineFormula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="抗力">
					<div class="collapse-formula">
						<MultilineFormula display="block" tagOffset="-6px" :option="[
							{ content: 'R' },
							{ content: 'S', scale: 0.6, position: 'bottom' },
							{ content: '=' },
							{ content: 'α' },
							{ content: '(S) ' },
							{
								rows: [
									[{ content: '∑', scale: 1.2 }, { content: 'F' }, { content: 'S', scale: 0.6, position: 'bottom' }],
									[{ content: '2' }, { content: 'A' }, { content: 'S', scale: 0.6, position: 'bottom' }]
								]
							},
							{ content: ' R' },
							{ content: 'τ', scale: 0.6, position: 'bottom' },
							{ content: '(S)' }
						]"></MultilineFormula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="不同破坏状态（7、8、9、10）每层抗震指数">
					<div class="collapse-formula">
						<Formula display="block" :option="[
							{ content: 'D' },
							{ content: 's', scale: 0.6, position: 'bottom' },
							{ content: '(7)' },
							{ content: '=' },
							{ content: '1.977' },
							{ content: '-' },
							{ content: '0.006' },
							{ content: 'R' },
							{ content: 's', scale: 0.6, position: 'bottom' }
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula display="block" :option="[
							{ content: 'D' },
							{ content: 's', scale: 0.6, position: 'bottom' },
							{ content: '(8)' },
							{ content: '=' },
							{ content: '1.975' },
							{ content: '-' },
							{ content: '0.005' },
							{ content: 'R' },
							{ content: 's', scale: 0.6, position: 'bottom' }
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula display="block" :option="[
							{ content: 'D' },
							{ content: 's', scale: 0.6, position: 'bottom' },
							{ content: '(9)' },
							{ content: '=' },
							{ content: '1.866' },
							{ content: '-' },
							{ content: '0.004' },
							{ content: 'R' },
							{ content: 's', scale: 0.6, position: 'bottom' }
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula display="block" :option="[
							{ content: 'D' },
							{ content: 's', scale: 0.6, position: 'bottom' },
							{ content: '(10)' },
							{ content: '=' },
							{ content: '1.740' },
							{ content: '-' },
							{ content: '0.003' },
							{ content: 'R' },
							{ content: 's', scale: 0.6, position: 'bottom' }
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="不同破坏状态（7、8、9、10）每层抗震指数【修正情况】">
					<div class="collapse-formula">
						<Formula color="#333333" :option="[
							{ content: 'D' },
							{ content: 'sm', scale: 0.6, position: 'bottom' },
							{ content: '(I)' },
							{ content: '=' },
							{ content: 'D' },
							{ content: 's', scale: 0.6, position: 'bottom' },
							{ content: '(I)' },
							{ content: '[' },
							{ content: '1' },
							{ content: '+' },
							{ content: '∑', scale: 1 },
							{ content: 'C', scale: 1.2 },
							{ content: 'i', scale: 0.6, position: 'bottom' },
							{ content: ']' },
						]"></Formula>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
		<div class="math-formula-panel">
			<h2>钢筋混凝土结构破坏状态</h2>
			<el-collapse>
				<el-collapse-item title="矩形框架柱层间屈服剪力">
					<div class="collapse-formula">
						<Formula color="#666666" font-size="30px" fontWeight="100" letterSpacing="0" :option="[
							{ content: '∑', },
							{ content: 'Q', left: '-2px' },
							{ content: 'czi', scale: 0.5, position: 'bottom', left: '-10px' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="30px" fontWeight="100" :option="[
							{ content: 'N', skew: '-10deg', fontWeight: 'bold' },
							{ content: '=', margin: '0 8px', fontWeight: 'bold' },
							{ content: '∑', scale: 1.5, topContent: 'n', bottomContent: 'i=s', fontWeight: 'bold', tagLineHeight: '0.6' },
							{ content: 'N', skew: '-10deg', left: '-2px', super: 'u', sub: 'i', fontWeight: 'bold' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula style="margin-left:40px;" font-size="30px" fontWeight="100" :option="[
							{ content: 'N', skew: '-10deg', sub: 'max', fontWeight: '900' },
							{ content: '=', margin: '0 8px', fontWeight: 'bold' },
							{ content: 'b', skew: '-15deg' },
							{ content: 'h', skew: '-15deg' },
							{ content: 'f', skew: '-15deg', sub: 'ck' },
							{ content: '+' },
							{ content: '(' },
							{ content: 'A', skew: '-15deg', sub: 's' },
							{ content: '+' },
							{ content: 'A', skew: '-15deg', super: '\'', sub: 's' },
							{ content: ')' },
							{ content: 'f', skew: '-15deg', super: '\'', sub: 'yk' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula style="margin-left:40px;" font-size="30px" fontWeight="100" :option="[
							{ content: 'N', skew: '-10deg', sub: 'min', fontWeight: '900' },
							{ content: '=', margin: '0 8px', fontWeight: 'bold' },
							{ content: '(' },
							{ content: 'A', skew: '-15deg', sub: 's' },
							{ content: '+' },
							{ content: 'A', skew: '-15deg', super: '\'', sub: 's' },
							{ content: ')' },
							{ content: 'f', skew: '-15deg', sub: 'yk' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="N">
					<div class="collapse-formula">
						<Formula font-size="32px" :option="[
							{ content: 'N', fontWeight: 'bold' },
							{ content: 'U', scale: 0.6, position: 'top' }
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="32px" :option="[
							{ content: 'N', fontWeight: 'bold' },
							{ content: 'L', scale: 0.6, position: 'top' }
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="框架为强梁弱柱型框架柱">
					<div class="collapse-formula">
						<Formula display="block" tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'M', sub: 'z' },
							{ content: '=', margin: '0 8px' },
							{ content: '0.8' },
							{ content: 'A', sub: 's' },
							{ content: 'f', skew: '-15deg', sub: 'yk' },
							{ content: 'h' },
							{ content: '+' },
							{ content: '0.4Nh' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula display="block" tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'M', sub: 'z' },
							{ content: '=', margin: '0 8px' },
							{ content: '0.8' },
							{ content: 'A', sub: 's' },
							{ content: 'f', skew: '-15deg', sub: 'yk' },
							{ content: 'h' },
							{ content: '+' },
							{ content: '0.4Nh' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="对称配筋矩形截面偏压柱">
					<div class="collapse-formula">
						<Formula display="block" tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'M', sub: 'cy' },
							{ content: '=', margin: '0 8px' },
							{ content: 'f', skew: '-15deg', sub: 'yk' },
							{ content: 'A', sub: 's' },
							{ content: '(' },
							{ content: 'h', sub: '0' },
							{ content: '-' },
							{ content: 'a', sub: '\'', sub: 's' },
							{ content: ')' },
							{ content: '+' },
							{ content: '0.5Nh' },
							{ content: '(' },
							{ content: '1-N/' },
							{ content: 'f', skew: '-15deg', sub: 'cmk' },
							{ content: 'bh' },
							{ content: ')' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula display="block" tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'M', sub: 'cy' },
							{ content: '=', margin: '0 8px' },
							{ content: 'f', skew: '-15deg', sub: 'yk' },
							{ content: 'A', sub: 's' },
							{ content: '(' },
							{ content: 'h', sub: '0' },
							{ content: '-' },
							{ content: 'a', super: '\'', sub: 's' },
							{ content: ')' },
							{ content: '+' },
							{ content: 'ξ(1-0.5ξ)' },
							{ content: 'f', skew: '-15deg', sub: 'cmk' },
							{ content: 'bh', super: '2', sub: '0' },
							{ content: '-N(0.5h-' },
							{ content: 'a', super: '\'', sub: 's' },
							{ content: ')' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="非强梁弱柱型框架时">
					<div class="collapse-formula">
						<MultilineFormula display="block" tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'M', super: 'U', sub: 'cy' },
							{ content: '=', margin: '0 8px' },
							{ content: '∑' },
							{ content: 'M', super: 'U', sub: 'by' },
							{
								rows: [
									[{ content: 'K', sub: 'i' }],
									[
										{ content: 'K', sub: 'i' },
										{ content: '+' },
										{ content: 'K', sub: 'i+1' },
									]
								]
							},
						]">
						</MultilineFormula>
					</div>
					<div class="collapse-formula">
						<MultilineFormula display="block" tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'M', super: 'L', sub: 'cy' },
							{ content: '=', margin: '0 8px' },
							{ content: '∑' },
							{ content: 'M', super: 'L', sub: 'by' },
							{
								rows: [
									[{ content: 'K', sub: 'i' }],
									[
										{ content: 'K', sub: 'i' },
										{ content: '+' },
										{ content: 'K', sub: 'i-1' },
									]
								]
							},
						]">
						</MultilineFormula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="Qcz">
					<div class="collapse-formula">
						<MultilineFormula tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'Q', sub: 'cz' },
							{ content: '=', margin: '0 8px' },
							{
								rows: [
									[
										{ content: 'M', super: 'U', sub: 'cz' },
										{ content: '+' },
										{ content: 'M', super: 'L', sub: 'cz' },
									],
									[{ content: 'H', sub: 'n' }]
								]
							},
						]">
						</MultilineFormula>
					</div>
					<div class="collapse-formula">
						<MultilineFormula tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'Q', sub: 'cz' },
							{ content: '=', margin: '0 8px' },
							{
								rows: [
									[{ content: '0.16' }],
									[{ content: 'λ+1.5' }]
								]
							},
							{ content: 'f', skew: '-15deg', sub: 'ck' },
							{ content: 'bh', sub: '0' },
							{ content: '+' },
							{ content: 'f', skew: '-15deg', sub: 'yvk' },
							{
								rows: [
									[{ content: 'A', skew: '-15deg', sub: 'sv' }],
									[{ content: 'S' }]
								]
							},
							{ content: 'h', sub: '0' },
							{ content: '+0.056' },
							{ content: 'N', skew: '-15deg' },
						]">
						</MultilineFormula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="砖填充墙钢筋混凝土框架结构的层间现有受剪承载力">
					<div class="collapse-formula">
						<Formula color="#666666" font-size="30px" fontWeight="100" letterSpacing="0" :option="[
							{ content: '∑', },
							{ content: 'Q', left: '-2px' },
							{ content: 'mzi', scale: 0.5, position: 'bottom', left: '-10px' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="Qmy">
					<div class="collapse-formula">
						<Formula tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'Q', sub: 'my' },
							{ content: '=', margin: '0 8px' },
							{ content: '∑' },
							{ content: '(' },
							{ content: 'M', super: 'U', sub: 'cy' },
							{ content: '+' },
							{ content: 'M', super: 'L', sub: 'cy' },
							{ content: ')' },
							{ content: '/' },
							{ content: 'H', sub: '0' },
							{ content: '+' },
							{ content: 'ζ', sub: 'N' },
							{ content: 'f', skew: '-15deg', sub: 'vk' },
							{ content: 'A', sub: 'm' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="带边框柱的钢筋混凝土抗震墙的层间现有受剪承载力">
					<div class="collapse-formula">
						<Formula color="#666666" font-size="30px" fontWeight="100" letterSpacing="0" :option="[
							{ content: '∑', },
							{ content: 'Q', left: '-2px' },
							{ content: 'wzi', scale: 0.5, position: 'bottom', left: '-10px' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="Qwy">
					<div class="collapse-formula">
						<MultilineFormula tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'Q', sub: 'wy' },
							{ content: '=', margin: '0 8px' },
							{
								rows: [
									[{ content: '1' }],
									[{ content: 'λ-0.15' }]
								]
							},
							{ content: '(' },
							{ content: '0.04' },
							{ content: 'f', skew: '-15deg', sub: 'ck' },
							{ content: 'A', skew: '-15deg', sub: 'w' },
							{ content: '+' },
							{ content: '0.1N' },
							{ content: ')', super: 'U' },
							{ content: '+0.8' },
							{ content: 'f', skew: '-15deg', sub: 'yvk' },
							{
								rows: [
									[{ content: 'A', skew: '-15deg', sub: 'sh' }],
									[{ content: 'S' }]
								]
							},
							{ content: 'h', sub: '0' }
						]">
						</MultilineFormula>
					</div>
					<div class="collapse-formula">
						<MultilineFormula tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'Q', sub: 'wy' },
							{ content: '=', margin: '0 8px' },
							{
								rows: [
									[{ content: '1' }],
									[{ content: 'λ-0.15' }]
								]
							},
							{ content: '(' },
							{ content: '0.04' },
							{ content: 'f', skew: '-15deg', sub: 'ck' },
							{ content: 'A', skew: '-15deg', sub: 'w' },
							{ content: '+' },
							{ content: '0.1N' },
							{ content: ')', super: 'L' },
							{ content: '+0.8' },
							{ content: 'f', skew: '-15deg', sub: 'yvk' },
							{
								rows: [
									[{ content: 'A', skew: '-15deg', sub: 'sh' }],
									[{ content: 'S' }]
								]
							},
							{ content: 'h', sub: '0' }
						]">
						</MultilineFormula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="地震剪力计算">
					<div class="collapse-formula">
						<Formula tagOffset="-6px" font-size="20px" :option="[
							{ content: 'T', sub: '1' },
							{ content: '=', margin: '0 8px' },
							{ content: '0.1*' },
							{ content: '层数', fontWeight: 'bold' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula tagOffset="-6px" font-size="20px" :option="[
							{ content: 'G', sub: 'i' },
							{ content: '=', margin: '0 8px' },
							{ content: 'N', skew: '-15deg', super: 'U', fontWeight: 'bold' },
							{ content: '+' },
							{ content: '0.5*活荷载' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula tagOffset="-6px" font-size="20px" :option="[
							{ content: 'G', sub: 'i' },
							{ content: '=', margin: '0 8px' },
							{ content: 'N', skew: '-15deg', super: 'U', fontWeight: 'bold' },
							{ content: '+' },
							{ content: '0.5*跨度*柱距*活荷载' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'Q', fontWeight: 'bold' },
							{ content: 'Ek', scale: '0.8' },
							{ content: '=', margin: '0 8px' },
							{ content: '0.85α1', fontWeight: 'bold' },
							{ content: 'GE', fontWeight: 'bold' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'δ', scale: '1.2' },
							{ content: 'n' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<MultilineFormula tagOffset="-6px" fontSize="24px" :option="[
							{ content: 'Q', sub: 'mi' },
							{ content: '=', margin: '0 8px' },
							{
								rows: [
									[
										{ content: 'G', sub: 'i' },
										{ content: 'H', sub: 'i' },
									],
									[
										{ content: '∑', topContent: 'n', bottomContent: 'j=1', tagLineHeight: '0.6' },
										{ content: 'G', sub: 'j' },
										{ content: 'H', sub: 'j' },
									]
								]
							},
							{ content: '(' },
							{ content: '1' },
							{ content: '-' },
							{ content: 'δ', sub: 'n' },
							{ content: ')' },
							{ content: 'Q', sub: 'Ek' },
						]">
						</MultilineFormula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="楼层屈服剪力">
					<div class="collapse-formula">
						<Formula display="block" font-size="32px" style="margin-left: 20px;" :option="[
							{ content: 'Q', sub: 'zi' },
							{ content: '=', margin: '0 8px' },
							{ content: '∑', scale: '1.5' },
							{ content: 'Q', sub: 'czi' },
							{ content: '+0.7' },
							{ content: '∑', scale: '1.5' },
							{ content: 'Q', sub: 'mzi' },
							{ content: '+0.7' },
							{ content: '∑', scale: '1.5' },
							{ content: 'Q', sub: 'wzi' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="楼层的剪力屈服系数">
					<div class="collapse-formula">
						<Formula display="block" tagOffset="-8px" font-size="30px" style="margin: 10px 0;" :option="[
							{ content: 'q', scale: '1.2', sub: 'i' },
							{ content: '=', margin: '0 8px' },
							{ content: 'Q', sub: 'zi' },
							{ content: '/' },
							{ content: 'Q', sub: 'mi' },
						]"></Formula>
					</div>
				</el-collapse-item>
				<el-collapse-item title="楼层最大延伸率的平均值">
					<div class="collapse-formula">
						<MultilineFormula display="inline-block" font-size="32px" style="margin-left: 20px;" :option="[
							{ content: 'μ', scale: '1.5', sub: 'i', topContent: '_', top: '-8px' },
							{ content: '=', margin: '0 8px' },
							{
								rows: [
									[
										{ content: '1+' },
										{ content: '∑', scale: '1.5' },
										{ content: 'C', sub: 'k' },
									],
									[
										{ content: '√' },
										{ content: '—', top: '-11px', left: '-10px' },
										{ content: 'q', sub: 'i', left: '-35px' },
									]
								]
							},
							{ content: 'exp[2.6(1-' },
							{ content: 'q', sub: 'i' },
							{ content: ')]' },
						]"></MultilineFormula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'μ', topContent: '_', top: '-8px' },
							{ content: '(Ⅵ)' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'μ', topContent: '_', top: '-8px' },
							{ content: '(Ⅶ)' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'μ', topContent: '_', top: '-8px' },
							{ content: '(Ⅷ)' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'μ', topContent: '_', top: '-8px' },
							{ content: '(Ⅸ)' },
						]"></Formula>
					</div>
					<div class="collapse-formula">
						<Formula font-size="20px" :option="[
							{ content: 'μ', topContent: '_', top: '-8px' },
							{ content: '(Ⅹ)' },
						]"></Formula>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
		<div class="math-formula-panel">
			<h2>高层建筑破坏状态</h2>
			<el-collapse>
				<el-collapse-item title="根据弹性最大层间位移角计算震害程度">
					<div class="collapse-formula">
						<Formula tagOffset="-6px" fontSize="20px" :option="[
							{ content: 'α', sub: 's' },
							{ content: '=', margin: '0 8px' },
							{ content: '0.42α', super: '2', sub: 'e' },
							{ content: '+0.59α', sub: 'e' },
							{ content: '+0.115' },
						]"></Formula>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
// 引入公式组件
import Formula from '@/components/Formula';
import MultilineFormula from '@/components/Formula/multiline';
// 获取当前实例
const { proxy } = getCurrentInstance();
// 当前dom对象
const building = ref();

defineExpose({
	building
});
</script>

<style lang="scss" scoped>
.el-collapse {
    --el-collapse-header-font-size: 20px;
    --el-collapse-content-font-size: 20px;

    .collapse-formula {
        text-align: center;
    }
}
</style>